<!--
 * @Description:
 * @Author: dh
 * @Date: 2022-01-18 14:42:21
 * @LastEditors: dh
 * @LastEditTime: 2023-03-30 10:28:23
-->
<div class="bruce flex-ct-x" data-title="使用writing-mode排版竖向文本">
	<div class="vertical-text">
		<h3 class="title">情</h3>
		<p>
			我见犹怜，<br />爱不释手。<br />雅俗共赏，<br />君子好逑。
			<span class="year">2022</span>
			<span>-</span>
			<span class="year">2023</span>
		</p>
	</div>
</div>
<style>
	.vertical-text {
		/* 排版竖向文本 */
		writing-mode: vertical-rl;
	}

	.title {
		text-align: start;
	}

	h3 {
		padding-left: 20px;
		font-weight: bold;
		font-size: 18px;
		color: #f66;
	}

	p {
		line-height: 30px;
		color: #66f;
	}

	.year {
		/* 文字朝向 */
		text-orientation: upright;
		/* 连续文本是否组合起来 */
		text-combine-upright: all;
	}
</style>
